<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="page.js"></script>

    <style type="text/css">
      #idData {
        color: red;
        border: solid;
        text-align: center;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body onLoad="goPage(1,10);">
    <table id="idData" width="70%">
      <tr>
        <td>liujinzhong1</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong2</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong3</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong4</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong5</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong6</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong7</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong8</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong9</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong10</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong11</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong12</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong13</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong14</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong15</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong16</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong17</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong18</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong19</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong20</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong21</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong22</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong23</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong24</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong25</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong26</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong27</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong28</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong29</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong30</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong31</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong32</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong33</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong34</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong35</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong36</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong37</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong38</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong39</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
      <tr>
        <td>liujinzhong40</td>
        <td>25</td>
        <td>男</td>
        <td>山西吕梁</td>
      </tr>
    </table>
    <table width="60%" align="right">
      <tr>
        <td><div id="barcon" name="barcon"></div></td>
      </tr>
    </table>
    <script>
      /**
       * 分页函数
       * pno--页数
       * psize--每页显示记录数
       * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
       * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
       **/
      function goPage(pno, psize) {
        var itable = document.getElementById('idData')
        var num = itable.rows.length //表格所有行数(所有记录数)
        console.log(num)
        var totalPage = 0 //总页数
        var pageSize = psize //每页显示行数
        //总共分几页
        if (num / pageSize > parseInt(num / pageSize)) {
          totalPage = parseInt(num / pageSize) + 1
        } else {
          totalPage = parseInt(num / pageSize)
        }
        var currentPage = pno //当前页数
        var startRow = (currentPage - 1) * pageSize + 1 //开始显示的行  31
        var endRow = currentPage * pageSize //结束显示的行   40
        endRow = endRow > num ? num : endRow
        40
        console.log(endRow)
        //遍历显示数据实现分页
        for (var i = 1; i < num + 1; i++) {
          var irow = itable.rows[i - 1]
          if (i >= startRow && i <= endRow) {
            irow.style.display = 'block'
          } else {
            irow.style.display = 'none'
          }
        }
        var pageEnd = document.getElementById('pageEnd')
        var tempStr =
          '共' +
          num +
          '条记录 分' +
          totalPage +
          '页 当前第' +
          currentPage +
          '页'
        if (currentPage > 1) {
          tempStr +=
            '<a href="#" onClick="goPage(' + 1 + ',' + psize + ')">首页</a>'
          tempStr +=
            '<a href="#" onClick="goPage(' +
            (currentPage - 1) +
            ',' +
            psize +
            ')"><上一页</a>'
        } else {
          tempStr += '首页'
          tempStr += '<上一页'
        }

        if (currentPage < totalPage) {
          tempStr +=
            '<a href="#" onClick="goPage(' +
            (currentPage + 1) +
            ',' +
            psize +
            ')">下一页></a>'
          tempStr +=
            '<a href="#" onClick="goPage(' +
            totalPage +
            ',' +
            psize +
            ')">尾页</a>'
        } else {
          tempStr += '下一页>'
          tempStr += '尾页'
        }

        document.getElementById('barcon').innerHTML = tempStr
      }
    </script>
  </body>
</html>
